/**
 * 
 * 
 * 
 * 
 * 
 * 配置处理CSS样式表的第三方loader:
 *       （在 main.js 中）       import  './笔记.js/.css'         导入路径
 *          (   webpack  默认只处理 Js 文件   无法处理其他类型的文件)
 * 
 * 
 *          npm i style-loader css-loader -D     
 * 
 * 
 *          在 webpack.config.js 中   
 *              module:{
 *                             rules:[           //所有第三方匹配 模块的匹配规则
 *                                {test :  / \.css$ / ,use:['style-loader' ,'css-loader' ] }
 *                                     ]                 
 *                           }
 * 
 * 
 *                  分析webpack 调用第三方loader的过程。
 * 
 *                     在调用loader时  是从后往前调用
 *                          
 * 
 *                  ＊配置处理less文件的loader
 *                     （在 main.js 中）       import  './笔记.js/.css'  
 *                      （在 main.js 中）       import  './笔记.js/.less'   
 *                         （ npm i less ）
 *                   {test :  / \.less$ / ,use:['style-loader' ,'css-loader','less-loader' ] }
 *                      
 * 
 * 
 *  
 *                        ＊配置处理less文件的loader:
 *                          （在 css文件中 创建文件）       import  './笔记.js/.less' 
 *                             （ cnpm i node-sass -D ）
 *                  {test :  / \.sass$ / ,use:['style-loader' ,'css-loader','sass-loader' ] }
 *                  
 * 
 *                          *配置处理scss文件的loader:
 * 
 *                          （在 css文件 中）       import  './笔记.js/.scss'
 *      
 * 
 *                    在组件中：
 *                         <style lang="scss" scoped>
             @import './css/layout.scss' ;


                </style>


                在 config  中：

                    {test :  /\.scss$/ ,use:['style-loader' ,'css-loader','sass-loader']},
 *                          
 *          
 * 
 * 
 *                          ＊＊＊＊复习webpack基本配置：
 *                         npm init -y
 *                          
 *                          cnpm i webpack-dev-server
 * 
 * 
 * 
 * 
 * 
 * 
 *                              
 *                              
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 *                           ***webpack 中  url-loader的使用：
 *                          在css中 引入图片URL  
 *                              background：url('../webpack-study/src/images/1.jpg')
 *                          (默认情况下webpack 无法处理css文件中的url地址)
 *                              
 *                          cnpm i url-lader file-loader -D
 *                              
 *                              在webpack-config.js中 添加;
 *                          module:{
 *                             rules:[           //所有第三方匹配 模块的匹配规则
 *                                {test :  / \.(jpg｜png|gif|bmg|jpeg)$/ ,use:'url-loader?limit=40000   '}
 *                                                      （图片的字节小于limit的值会进行转为base64的字符串）
 *                                     ]                 
 *                           }
 * 
 * 
 * 
 * 
 * 
 * 
 *                  webpack 中bable的配置：
 *                  
 *                    //面向对象
                         //静态属性 ： 通过类名 直接访问的属性
                         //实例属性：  通过 类的实例 来访问的属性
                         //在webpack中只能处理一部分语法 要借助于第三方loader 处理高级语法
                         // 把高级语法处理为低级语法  交给webpack 打包到 bundle中
class Person{
     static info ={ 
          name:'小明',age: 18
     }
}         

          
           // var p1 =new person()


                        **通过 bable 可以将我们的高级语法 转化成低级语法
          第一套包： sudo npm i babel-core babel-loader babel-plugin-transform-runtime -D
          第二套包：  sudo npm i babel-preset-env babel-preset-stage-0 -D
             在webpack-config.js中 添加;
 *                          module:{
 *                             rules:[           //所有第三方匹配 模块的匹配规则
 *                    
 *     {test :  / \.js$/ ,use:'babel-loader', exclude:/node_modules/ }      (要排除node_modules中的js文件)
 *                                     ]                 
 *                           }
 * 
 * 
 *          然后 在项目的根目录中  新建一个 .babelrc 的bable配置文件：
 * 
 *              {
 *                      "presets":["env","stage-0"],
 *                      "plugins":[transfrom-runtime]
 *              }
 * 
 * 
 * 
 *                  cnpm run dev 
 * 
 *                   ***还没有解决＊＊＊
 * 
 * 
 * 



                    使用Vue实例 render 方法 渲染组件

                    var login={
                        template:'<h1>登录组件</h1>'
                    }

                    methods:{

                    },
                    render:function(creatElements){
                            var html=creatElements(login)
                            return html
                    }
                    //render  直接替换了 el 的容器   再继续往容器放 标签 不会显示在页面中




                    ＊＊区分 用webpack中导入Vue 和普通页面中用script 导入Vue的：

                        npm i vue -S
                        

 * 

            安装 ：
            sudo npm i webpack-dev-server -D   (安装到本地项目)
            (强制项目本地 要安装 webpack)
            sudo npm i webpack-cli -D  (安装到本地项目 webpack-cli)

            npm run dev 




            webpack 中导入vue  ：
            （ sudo npm i vue -S ）
            //单纯导入这个包 不是完整的包 runtime只有这个

            <script src="/bundle.js"></script>   //一定要在最后导入






            在VUE 中结合 render 渲染 组件：

<template>

</template>
<style>

</style>

<script>

</script>


首先会有这三个部分


                              第一步  导入login组件：
                               import login from '../src/组件.vue'
                               ( 直接大包文件 解析不了 )

                               sudo npm i vue-loader vue-template-compiler -D

                               在 webpack.config.js 中配置：
                               {test :  /\.vue$/ ,use:'vue-loader'}



                         const VueLoaderPlugin = require('vue-loader/lib/plugin');

                          plugins: [
      // make sure to include the plugin for the magic
      new VueLoaderPlugin()     
  ],       
                         (必须在webpack.config.js 中配置)



                         main.js中：

import login from './组件.vue'    //直接命名定义

var  vm = new Vue({
     el: '#app',
     data:{
       msg:'最后好了 导入导入导1111入'
     },  
       methods:{
           },
            //  render:function(createElements){
            //      var html=createElements(login)
            //      return html
            //  }
            render:c =>c(login)
});     


                         （组件自己也会有 data 和 mathods ）

                    export default  和 export的使用方法：



                    新建一个test.js  
                    export default{
                         name:  '小明'
                    }

                    或者：  var info ={
                         name:  '小明'
                    }
                    export default info                  //只允许向外暴露一次（export var m2 ='小明'）


                    在main.js 中:  
                    import m1 from './test,js'           //import {m2} from './test,js'
                    console.log(m1.name)



                    结合webpack  使用 vue-router:








                    （想要换项目   就得 改 webpack.config.js  中的src   ）






               结合webpack实现 children  子路由：

               var router=new VueRouter({             //创建路由对象  
    routes:[
              //       { path: '/account', component: regist ( 没有就要去创建) }
              { path: '/account', 
              component: account ,
              children:[
                { path: 'qq', component: qq }     //account 下面的 子路由 qq 
                                                
                                                
              ]
             } ,


              { path: '/regiest', component: regiest }      
    ]
  });


  account的子路由 只能在account组件里面展示  所以必须在account下面加个 router-link  和  router-view:

                          <router-link to="/account/qq">QQ</router-link>  
                <router-link to="/account/chat">Chat</router-link>

         
                        <router-view></router-view>






                        组件中的style 的 lang 的属性和 scoped 的属性
                         <style scoped>     //是通过css的属性选择器实现的

                         </style>


                          <style  lang="scss" scoped>
                                   body{
                                        <div></div>
                                   }
                         </style>






                         抽离路由模块：

                         新建一个 ./router.js：

import  account from './zj/Account.vue'    //  第四步  自定义导入组件   然后 挂载
import  regiest from './zj/Regiest.vue'
import qq from './zj/子组件qq.vue'
import chat from './zj/子组件chat.vue'


import VueRouter from 'vue-router'   //导入包


  var router=new VueRouter({             //创建路由对象  
    routes:[
              //       { path: '/account', component: regist ( 没有就要去创建) }
              { path: '/account', 
              component: account ,
              children:[
                { path: 'qq', component: qq } ,
                { path: 'chat', component: chat } 

              ]
             } ,


              { path: '/regiest', component: regiest }      
    ]
  });


  export default router      //向外暴露路由  


  在main.js 中 挂载了一个 router  所以要 导入router：
  import router from './router.js'





    

                    Mint-UI中 按钮组件的使用：    


                    大部分 css components  可以直接使用：


                    使用 js components :
                     

                    在调用组件的script中导入：
                     import { Toast } from 'mint-ui';


                     Toast({
                             message: 'Upload Complete',
                             position: 'bottom',
                              duration: 5000
                                });


                                Toast({
                            message: 'operation success',
                           iconClass: 'icon icon-success'     ／／设置图标的类  
                                     });






                    
export default={     //向外暴露成员  
        data(){
            return{

            }
        },
        careted(){
                this.getlist()
        },
            methods:{

                    getlist(){
                       
                             this.show1()
                        setTimeo(function(){
                                //过三秒移除 方法
                                this.toastinstance.close();
                        },3000);
                    },


                    show(){
                        alert("调用了  webpack的account中Vue中 子组件 方法 ");
                    },
                    show1(){
                       this.toastinstance= Toast({
                             message: 'Upload Complete 不知道',
                             position: 'top',
                             duration:500  //   duration 为 －1  的话  弹出之后不消失  (这是显示的时间长度)
                                });

                              var close =setTimeout(() => {
                            instance.close();
                                 }, 100);

                    }
            }
}






                         MUI 介绍：
                              import './第三方包/MUI/css/mui.css'










                                   项目：

import Vue from '../node_modules/vue/dist/vue.js'   //使用vue

import VueRouter from 'vue-router'   //导入包
Vue.use(VueRouter)    //手动安装


//导入MUI的样式



import MintUI from 'mint-ui';
import 'mint-ui/lib/style.css'

//导入MUI的样式
  import './libs/mui/css/mui.css'
  //导入bootstrap 样式
  import 'bootstrap/dist/css/bootstrap.css'

Vue.use(MintUI);






把本地项目托管到云码中：

                         git init
                         git status
                         git add.

                         git commit "init my project"
                         git status
                         (nothing to commit, working tree clean)

                           公钥：(ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQDlwqRtz01xbI4HBFZxl+7Ab/YsfgnLSN8/Wfrd/ksDG8SZh71r6QCWOlc6v8cNgyrQaq257vd6P8CDxjAbChOU/6kth5weK7zuhFW/FBYq1vVp/yiUK/vfA8aPRH2Y51Jdxs8o7uZm4tw2re8uwlVZLqlkq+7Tyar9KzfYC2zG4F4OZ70Pal5sTahOerINhUY5kC02MPp8jCU9OPytLWT1Ll0l4Xa+Y+vSgTljjxTq6iRBeS/R5potG1bULr1xu2ZzkUSBndEjIkAD2GplaUsUEZERscP1sD41opts60wk9oyxI5ajzzXhEUHlpVqZOZlZ3/6/wVUmIDzkhAEVfH1J 1424800753@qq.com
)


                                git remote rm origin
                                git remote add origin https://gitee.com/yjw_520/Vue_once.git
                                git push -u origin master


                                git push -u origin master时  是 输入自己登录时的用户名 密码

                                1424800753@qq.com
                                jiwjiw52520







                            使用  VS code 默认的  Git工具快速提交代码：





  import './libs/mui/css/mui.css'    

  import './libs/mui/css/icons-extra.css'    (扩展图标 应该在原图标下导入)

  import 'bootstrap/dist/css/bootstrap.css'




                              把图标改成 路由切换器   （直接把 a 标签 换成 router-link ）


                       <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
                                  （徽章）


                              引入div时 要自定义 高度
                              eg:轮播图
                              mint-swipe


                              .mint-swipe{
                                      height: 500px;
                                  &:nth-child(1){
                                    backgroundColor: red;
                                  }
                                    }



                          加载轮播图数据：
                          sudo npm i vue-resource -S







                          


                            定义局部 过滤器（在main.js中设置）：
 filters:{
			"formatTime":function(str){
 var dt= new Date(str)        //根据给定的字符串 得到一个特定的时间
var y =dt.getFullYear()
var x=dt.getMonth() + 1
var z =dt.getDate()

var h = dt.getHours()
var m = dt.getMinutes()
var s = dt.getSeconds()
return  ` ${y}-${x}-${z} ${h}:${m}:${s}`
           }

		}



    (如果遇到 组件内的内容 被下面的“路由” 遮挡 那就在相应的路由下面的 style 加一个 padding-bottom: 50px  ) 
    (在组件中使用  v-for  要使用key ) (导入照片为  :src= "../项目/images/3.jpg")  


                    API:
                      一：获取新闻首页信息
                      二：点击新闻之后获取 新闻详细信息
                      三：评论列表首页信息 和 加载评论信息
                      


        
                    getnewlist(){
						
						
						this.$http.get("../API/新闻.json")
						 .then( result=>{

							   if (result.body.status===0){
                              
                                this.newlist=result.body.message
							  
							 }
						 } 
                           
                            // function(data){
                            //     this.newlist=data.img_url
                            // }
						 )
						


						 
                    }


                          评论功能实现 ：

                          （把评论抽离成一个共有的组件）
                          先单独创建一个评论组件
 在需要评论组件的页面 手动导入 评论组件（  import publicComment from '../项目/zj/publicCommentzj.vue' ）
      使用 components 属性    将导入的publicCommentzj组件注册为自己的子组件
      最后 将 注册子组件时的 注册名称    以标签的形式引入


                    components:{
                      "comment-box":publicCommentzj
                    }




                    加载首页评论内容（从后台获取）

                    实现加载更多事件：
                    （从后台获取    把老数据 拼接到 新数据）：
                    this.comments=this.commments.concat(result.body.message )
                                    老数据        拼接          新数据
                    
                    //手动拼接：
                    result.boay.message.unshift( { title:  "全部" , id : 0 }  )
                    
                    
                    发表评论：

                    当发表评论 OK后  重新刷新列表 查看评论


                    (提交给服务器数据)
                    this.$http.post( 'www.yjw.com', { content: this.msg.trim()}  ,'emulateJSON:true'  )
                                       地址                    传入对象                         表单格式
                          


                      （再main.js中可以设置 全局的表单格式）
                      Vue.http.options.emulateJSON = true





                    











                    实现商品列表的经典两列布局：

.goods-list{
    padding-bottom: 50px;
    display: flex;
    flex-wrap:wrap;     ／／2x2 布局 
    justify-content: space-around;       //使里面的小盒子 往左右两边靠
    padding: 7px;            //边框7px


}
.goods-item{
    width: 49%;      //使每一张图片 占浏览器的49%
    border: 1px solid grey;         ／／div的边框颜色
    margin: 3px 0 ;
    box-shadow: 0 0 8px #ccc;   

     display: flex;              
    flex-direction: column;          //使这个div 始终紧靠底部
    justify-content: space-between   


}
 #img1{
     width: 100%;       使图片适应div
 }
.goods-info{
    background-color: #ccc;
}

.now , .sell{
    color: red;
    font-size: 20px;
}
.now{
    font-size: 30px;
}
.goods-item:hover{        //点击有效果

    border: 3px solid aqua; 
    
}





                    Vue-router 中编程式导航 介绍：


                    (在 router－link 中 要是有参数  就是:  :to=" '/home/shoppingmarket/goodsinfo'+ item.id "   )

                      在网页中有两种 跳转方式 ：
                      1:  使用 a 标签的形式
                      2: 使用 window.location.href

                      区分  this.$route  是路由参数对象   所有路由中的参数 ： parem jquery
                           this.$router  是路由导航对象  用它可以方便的控制路由的 前进 和 后退
                              
                       















*/